<template>
  <div class="message-tabs-container">
    <div
      v-for="(item, index) in tabs"
      :class="{ active: activeIndex === item.name }"
      :key="index"
      @click="
        () => {
          handleClickTabs(item, index)
        }
      "
    >
      {{ item.label || '--' }}
      <div class="red-point" v-if="item.unRead"></div>
    </div>
  </div>
</template>
<script>
export default {
  name: 'MessageTabs',
  props: {
    tabs: {
      type: Array,
      required: true,
    },
    activeIndex: {
      type: [Number, String],
      default: 0,
    },
  },
  data() {
    return {
      // activeIndex: 0,
    }
  },
  methods: {
    handleClickTabs(item) {
      this.$emit('tabclick', item)
    },
  },
}
</script>
<style lang="scss" scoped>
.message-tabs-container {
  display: flex;

  .active {
    background-color: #fff;
    color: blue;
    font-weight: bold;
  }

  .red-point {
    position: absolute;
    width: 10px;
    height: 10px;
    border-radius: 50%;
    border: none;
    background-color: red;
    top: -5px;
    right: -5px;
    z-index: 999;
  }

  div {
    width: 126px;
    height: 42px;
    font-size: 14px;
    color: #847593;
    cursor: pointer;
    border-top: 1px solid rgb(211, 209, 232);
    border-bottom: 1px solid rgb(211, 209, 232);
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    border-right: 1px solid rgb(211, 209, 232);

    &:first-child {
      border-left: 1px solid rgb(211, 209, 232);
    }
  }
}
</style>
